<template>
  <section class="page">
    <headerbar>{{ title }}
    </headerbar>

    <section>
      <section class="detail">
<!--        <h1 class="title text-left" v-html="tools.resumeEnter(data.title)"></h1>-->
        <div class="text-content" v-html="tools.resumeEnter(data.content)"></div>
        <p>{{data.createUserName}}&nbsp;发布于&nbsp;&nbsp;{{ getTimeNew(data.createTime) }}</p>
      </section>
      <section class="mgt-2 pdh-2">
        <div class="inner">
          <div class="comment-my">评论&nbsp;&nbsp;(&nbsp;{{ commentTotal }}&nbsp;)</div>
          <div class="icons-btn-wrap-my">
            <i @click="up(data.selfSupport)" class="icon-like" :class="{'icon-licked':data.selfSupport}"></i>
            <span class="hasUp-my">{{ data.supportTotal }}</span>
          </div>
        </div>
        <section>
          <fetchData
            class="live-msg-wrap pdv-4"
            :loading="isLoading"
            :data="selectList"
          ></fetchData>
          <div
            class="study-my"
            v-for="(item, index) in selectList"
            :key="index"
          >
            <div class="user-avatar">
              <div class="avatar">
                <img
                  v-if="item.createUser"
                  :src="tools.getAvatarUrl(item.createUser)+'&'+Date.now()"
                  alt=""
                />
                <img
                  v-else=""
                  src="../../../../static/images/user_bg.jpg"
                  alt=""
                />
              </div>
              <div class="head-my">
<!--                <div>{{ item.createUserName }}{{ getMyself(item.createUser) }}</div>-->
                <div class="name-my">{{ item.createUserName }}</div>
                <div v-if="isMySelf(item)" @click.stop="del(item.id,index,selectList,1)" class="right">删除
                </div>
              </div>
            </div>
            <!--          <div class="live-msg">{{ item.comment }}</div>-->
            <div class="card-foot-my">
              <span class="span-my" v-html="tools.resumeEnter(item.comment)">
              </span>
              <div class="text">
                <div>{{ getTimeNew(item.createTime) }}</div>
                <div class="right-my">
                  <div class="support"><i @click="upCommentNo(item,index,selectList,1)" class="icon-like"
                                          :class="{'icon-licked':item.selfSupport == true}"></i>{{
                      item.supportTotal
                    }}
                  </div>
                  <div class="support"><i @click="onfocus(item,index)" class="icon-comment"></i>{{ item.commentTotal }}
                  </div>
                </div>
              </div>
              <input type="hidden" v-model="flag" />
              <div v-if="item.child && item.child.length>0" class="split-my" @click="delChildComment(item,index)"><div class="split-inner"></div><div class="middle">收起</div><i class="icon-triangle-up"></i></div>
              <div v-else-if="item.commentTotal>0" class="split-my" @click="ChildComment(item,index)"><div class="split-inner"></div><div class="middle">展开{{ item.commentTotal }}条回复</div><i class="icon-triangle-down"></i></div>
            </div>
            <!--            评论别人的心得的评论-->
            <div class="recomment-my" v-if="item.child" v-for="(child,indexChild) in item.child" :key="index+child.id">
              <div class="head-my title">
<!--                <div>{{ child.createUserName }}{{ getMyself(child.createUser) }}<span-->
                <div class="name-my">{{ child.createUserName }}<span
                  class="arrow_left"></span>{{ child.replyToUser }}
                </div>
                <div v-if="isMySelf(child)" @click.stop="del(child.id,indexChild,item,2)" class="right-one">删除
                </div>
              </div>
              <div class="span-my" v-html="tools.resumeEnter(child.comment)">
              </div>
              <div class="text">
                <div>{{ getTimeNew(child.createTime) }}</div>
                <div class="right-my">
                  <div class="support"><i @click="upComment(child,indexChild,item.child,2)" class="icon-like" :class="{'icon-licked':child.selfSupport == true}"></i>
                    {{ child.supportTotal}}
                  </div>
                  <div class="support" @click="onfocusOne(child,item.id,index)"><i class="icon-comment"></i></div>
                </div>
              </div>
            </div>
          </div>
          <section class="people-list">
            <div
              class="text-center no-data"
              :loading="isLoading"
              :data="selectList"
              v-if="!isLoading && selectList.length === 0"
            >
              <img src="../../../../static/images/dangjian/home/water-logo-comment.png" alt="">
            </div>
            <section class="foot-more" v-else-if="!isLoading  && !onBottom">
              <div class="foot-center">
                <p @click="onPullingUp">查看更多</p>
              </div>
            </section>
            <onBottom v-else-if="onBottom"></onBottom>
            <p class="pdv-10"></p>
            <p class="pdv-10"></p>
          </section>
        </section>
        <!--        <fullscreenComponent @commentTotalDel="commentTotalDel" @commentTotalAdd="commentTotalAdd" @loadData="loadData" :auther="data.createUser" :xdId="data.id" :commentTotal="commentTotal" :commentId="commentId" :display.sync="display"></fullscreenComponent>-->
        <!--        <branchFooterComponent @loadData="loadData" :selfSupport="data.selfSupport" :commentTotal="commentTotal" :contentId="data.id" :supportTotal="data.supportTotal"></branchFooterComponent>-->
        <section class="foot-action">
          <div class="inner">
            <div class="avatar">
              <img
                v-if="userInfo.id"
                :src="tools.getAvatarUrl(userInfo.id)+'&'+Date.now()"
                alt=""
              />
              <img v-else="" src="../../../../static/images/user_bg.jpg" alt="" />
            </div>
            <div class="input-wrap">
              <textarea ref="textareaPl" :class="textareaClass" v-on:focus="onfocus()" v-on:blur="onblur()" :placeholder="placeholder" v-model="content"></textarea>
              <button @click="save" v-if="content" v-on:mousedown="mouseDown" class="text-btn"><span>提交</span></button>
            </div>
          </div>
        </section>
      </section>
    </section>
  </section>
</template>
<script>
import api from '@/common/config/api'
import tools from "@/utils/tools";
import branchFooterComponent from "@/components/common/branchFooterComponent";
import fullscreenComponent from "@/components/common/fullscreenComponent";
import moment from 'moment'

export default {
  name: 'branchExperienceDetail',
  components: {branchFooterComponent, fullscreenComponent},
  data() {
    return {
      display: false,//隐藏弹出框
      data: {},
      // count:0,
      title: '话题',
      selectList: [],
      isLoading: true,
      commentTotal: 0,//评论总数
      placeholder:'添加评论...',
      userInfo: '',
      commentId: '',
      content: '',
      textareaClass: '',
      pageIndex: 1,
      pageSize: 10,
      onBottom: false,
      branchPageCount: 0,//点击次数，用于支部空间次数控制
      flag:0,//用于刷新组件
      commentNewId: '',
      replyToUser:'',//被回复人姓名
      replyToUserId:'',//被回复人id
      selectListIndex:0,//用于定位添加的列表索引
      onfocusStatus:0, //判断评论走谁的方法 0 默认 1 一级评论 2 二级评论
      isSubmiting:true,//防止重复提交 true 允许提交 false 不允许提交
    }
  },
  created() {
    this.userInfo = this.$store.state.userInfo;
    this.data = this.$route.params.data
    this.loadData()
  },
  methods: {
    /*fullscreenShow(commentId) {
      this.display = true
      this.commentId = commentId
      // this.$store.state.newsDetail = item;
      // this.$createFullscreenComponent({
      //   $props: {
      //     commentId: commentId,
      //   },
      // }).show();
    },*/
    onPullingUp() {
      console.log("onPullingUp");
      ++this.branchPageCount
      console.log('this.branchPageCount', this.branchPageCount);
      // if (this.branchPageCount === 3) {
      //   this.pageSize = 1000
      // }
      this.loadData();
    },
    loadData() {
      this.isLoading = true;
      this.onBottom = false
      let data = {
        xdId: this.data.id,
        optFlag: 2,
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
      }
      this.fetchService.topic_selectCommentListByXd(data).then(res => {
        this.isLoading = false
        if (res.code !== 0) {
          return this.tools.tip(res.message)
        }
        if(res.code ===0 && (res.count<this.pageSize || res.data.length < this.pageSize)){
          this.onBottom = true
        }
        this.commentTotal = res.count
        this.pageIndex++;
        this.selectList = this.selectList.concat(res.data)
      })
    },
    mouseDown(){
      event.preventDefault()
    },
    ChildComment(item, index) {
      let dataNew = {
        "commentId": item.id,
        "createUser": item.createUser,
        "optFlag": 2,
        "pageNo": 1,
        "pageSize": 1000,
        "xdId": item.xdId
      }
      this.fetchService.topic_selectCommentListByXd(dataNew).then(res => {
        if (res.code !== 0) {
          return this.tools.tip(res.message)
        }
        this.flag++
        this.selectList[index].child = res.data
        console.log('this.selectList=', this.selectList);
      })
    },
    delChildComment(item, index){
      this.flag--
      this.selectList[index].child = []
    },
    /*commentTotalDel() {//用来给子页面更新评论数
      this.commentTotal--
    },
    commentTotalAdd() {//用来给子页面更新评论数
      this.commentTotal++
    },*/
    getTimeNew(createTime) {
      if (new Date(createTime).getFullYear() < new Date().getFullYear()) {
        return moment(createTime).format("YYYY-M-D");
      } else if (new Date(createTime).getDay() == new Date().getDay()) {
        return moment(createTime).format("HH:mm:ss");
      }
      return moment(createTime).format("MM-DD");
    },
    isMySelf(item) {//是否为自己
      if (item.createUser == this.userInfo.id) {
        return true
      }
      return false
    },
    getMyself(createUser) {//判断是否是自己
      if (this.data.createUser === createUser) {
        return '(作者)'
      }
    },
    /*点赞*/
    up(selfSupport) {
      if (selfSupport) {
        let data = {
          "comment": "",
          "commentId": "",
          "optFlag": "1",
          "replyToUser": "",
          "xdId": this.data.id
        }
        return this.fetchService.topic_cancelSupport(data).then(res => {
          if (res.code !== 0) {
            // return this.tools.tip(res.message , 2000)
            return
          }
          this.data.supportTotal--
          this.data.selfSupport = false
          return res
        })
      } else {
        let params =
          {
            "comment": "",
            "commentId": "",
            "optFlag": "1",
            "replyToUser": "",
            "xdId": this.data.id
          }
        return this.fetchService.topic_subSupport(params).then(res => {
          if (res.code !== 0) {
            // return this.tools.tip(res.message || '接口服务出错，请联系管理员', 2000)
            return
          }
          this.data.supportTotal++
          this.data.selfSupport = true
          // this.tools.tip('点赞成功', 2000)
          return res
        })
      }
    },
    del(id, index,list,type) {
      let _this = this
      this.$createDialog({
        type: 'confirm',
        title: "温馨提示",
        content: '确认删除？',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          _this.deleteMaterial(id, index,list,type);
        },
        onCancel: () => {
        }
      }).show()
    },
    deleteMaterial(id, index,list,type) {
      this.fetchService.topic_delXdOpt(id).then(res => {
        if (res.code !== 0) {
          return this.tools.tip(res.message)
        }
        this.tools.tip("删除成功")
        if(type === 1){
          this.commentTotal--
          list.splice(index, 1)
        }else if(type === 2){
          console.log('type==',list.commentTotal)
          list.child.splice(index, 1)
          list.commentTotal--
        }
      })
    },
    upComment(item, index,list,type) {
      if (item.selfSupport) {
        let data = {
          "comment": "",
          "commentId": item.id,
          "optFlag": "1",
          "replyToUser": "",
          "xdId": this.data.id
        }
        return this.fetchService.topic_cancelSupport(data).then(res => {
          if (res.code !== 0) {
            // return this.tools.tip(res.message , 2000)
            return
          }
          // debugger
          // this.hasUp = true
          list[index].supportTotal--
          this.flag--
          console.log(list[index].supportTotal);
          list[index].selfSupport = false
          console.log('listlist=',list);
          return res
        })
      } else {
        let data = {
          "comment": "",
          "commentId": item.id,
          "optFlag": "1",
          "replyToUser": "",
          "xdId": this.data.id
        }
        return this.fetchService.topic_subSupport(data).then(res => {
          if (res.code !== 0) {
            // return this.tools.tip(res.message , 2000)
            return
          }
          // debugger
          // this.hasUp = true
          list[index].supportTotal++
          this.flag++
          console.log(list[index].supportTotal);
          list[index].selfSupport = true
          // this.tools.tip('点赞成功', 1500)
          console.log('listlist=',list);
          return res
        })
      }
    },
    upCommentNo(item, index,list,type) {
      if (item.selfSupport) {
        let data = {
          "comment": "",
          "commentId": item.id,
          "optFlag": "1",
          "replyToUser": "",
          "xdId": this.data.id
        }
        return this.fetchService.topic_cancelSupport(data).then(res => {
          if (res.code !== 0) {
            // return this.tools.tip(res.message , 2000)
            return
          }
          // debugger
          // this.hasUp = true
          list[index].supportTotal--
          this.flag--
          console.log(list[index].supportTotal);
          list[index].selfSupport = false
          console.log('listlist=',list);
          return res
        })
      } else {
        let data = {
          "comment": "",
          "commentId": item.id,
          "optFlag": "1",
          "replyToUser": "",
          "xdId": this.data.id
        }
        return this.fetchService.topic_subSupport(data).then(res => {
          if (res.code !== 0) {
            // return this.tools.tip(res.message , 2000)
            return
          }
          // debugger
          // this.hasUp = true
          list[index].supportTotal++
          this.flag++
          console.log(list[index].supportTotal);
          list[index].selfSupport = true
          // this.tools.tip('点赞成功', 1500)
          console.log('listlist=',list);
          return res
        })
      }
    },
    goCommentList() {
      if (this.commentList === true) {
        this.$emit('onComment')
        return false
      }
      this.$store.state.newsDetail = this.detail
      this.$router.push({name: 'commentList', query: {id: this.detail.id}})
    },
    /*评论提交*/
    save() {
      if (!this.content || this.tools.isNullStr(this.content)) {
        return this.tools.alert('请填写留言')
      }
      if(!this.isSubmiting){
        return false
      }
      this.isSubmiting = false
        let params = {
        "comment": this.content,
        "commentId": this.commentNewId,
        "optFlag": "2",
        "replyToUser": this.replyToUser,
        "replyToUserId":this.replyToUserId,
        "xdId": this.data.id
      }
      // this.tools.showLoading()
      this.fetchService.topic_subComment(params).then(res => {
        if(res.code !== 0){
          return this.tools.tip(res.message || '网络异常，请稍后重试', 2000)
        }
        // this.tools.hideLoading()
        if (res.code === 0) {
          this.tools.tip('评论成功', 2000)
          if(this.onfocusStatus === 0){
            this.selectList.unshift(res.data)
            this.commentTotal++
          }else if(this.onfocusStatus === 1){
            this.selectList[this.selectListIndex].commentTotal++
            if(this.selectList[this.selectListIndex].child && this.selectList[this.selectListIndex].child.length>0){
              this.selectList[this.selectListIndex].child.push(res.data)
            }
          }else if(this.onfocusStatus === 2){
            this.selectList[this.selectListIndex].commentTotal++
            this.selectList[this.selectListIndex].child.push(res.data)
          }
          this.content = ''
          this.isSubmiting = true
          this.commentNewId = '' //清空commentNewId 防止前一个数据带过来
          this.replyToUser = '' //清空replyToUser
          this.replyToUserId = '' //清空replyToUserId
          this.onfocusStatus = 0
          console.log('this.selectList',this.selectList);
          this.flag++
          this.$refs.textareaPl.blur();//提交完成以后失去焦点
          return
        }
      })
    },
    onfocus(item,index) {
      console.log('onfocusNew');
      if(typeof item !== 'undefined'){
        this.placeholder = '回复'+item.createUserName+':'
        this.selectListIndex = index
        this.commentNewId = item.id
        this.replyToUser = item.createUserName
        this.replyToUserId = item.createUser
        this.onfocusStatus = 1
      }
      this.$refs.textareaPl.focus();
      this.textareaClass = 'on-focus'
    },
    onfocusOne(child,id,index){
      console.log('onfocusOne');
      if(typeof child !== 'undefined'){
        this.placeholder = '回复'+child.createUserName+':'
        this.selectListIndex = index
        this.commentNewId = id
        this.replyToUser = child.createUserName
        this.replyToUserId = child.createUser
        this.onfocusStatus = 2
      }
      this.$refs.textareaPl.focus();
      this.textareaClass = 'on-focus'
    },
    onblur(key) {
      this.placeholder = '添加评论...'
      // this.onfocusStatus = 0
      // this.commentNewId = ''
      // this.replyToUser = ''
      this.textareaClass = ''
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";

.page {
  font-size: 16PX;
  background: #fff !important;
  font-family: dang, PingFang SC, miui, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-serif !important;
}

.detail {
  border-bottom: 1px solid #d0d0d0;
  text-align:justify;
  padding: 0.2rem 0.4rem;
  .text-left {
    padding: 0px;
    margin-bottom: 0.5rem;
  }

  > p {
    line-height: 1.5em;
    font-size: 12PX;
  }

  .detail-my {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      margin-left: 3%;
      font-size: 16PX;

      > span {
        margin-right: 15px;
      }
    }

    .right {
      margin-right: 3%;

      .icon-topic {
        display: inline-block;
        width: 0.7rem;
        height: 0.7rem;
        background: url('../../../../static/images/dangjian/home/icon-topic.png') no-repeat center;
        background-size: 100% 100%;
        margin-right: 0.13333rem;
      }

      > span {
        height: 0.7rem;
        line-height: 0.7rem;
        font-size: 16PX;
      }
      display: flex;
      font-size: 16PX;
      border: 1px solid #949393;
      padding: 3px;
      border-radius: 5%;
    }
    .right-one{

    }
  }

  .text-content {
    user-select:text;
    line-height: 1.5em ;
    margin-bottom: 0.5em;
    user-select: text;
    font-size: 16PX ;
    color: #333 ;
    word-wrap: break-word;
    word-break: normal;
    text-align:justify;
    font-family: PingFang SC, miui, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-serif !important;
  }
}

.enclosure-upload p {
  font-size: 16PX;
  text-align: justify;
}

.list-item {
  flex-wrap: wrap;

  .enclosure-upload {
    width: 33%;
    margin-right: .5%;
    margin-bottom: .5%;
    flex-shrink: 0;

    &:nth-child(3n + 3) {
      margin-right: 0
    }

    img {
      width: 100% !important;
      min-height: 50px;
      height: auto !important;
    }
  }
}

.head-my {
  font-size: 16PX;
  display: flex;
  justify-content: space-between;
  width: 100%;
  .name-my{
    font-weight: bold;
  }
  .right {
    margin-right: 0.3rem;
    color: #D81E06;

    .icon-delete {
      display: inline-block;
      background: url('../../../../static/images/dangjian/home/icon-delete-red.png') no-repeat center;
      width: 0.4rem;
      height: 0.4rem;
      background-size: 100% 100%;
      margin-right: 0.13333rem;
    }
  }
  .right-one{
    margin-right: 0.3rem;
    color: #D81E06;
  }
}

.live-msg-wrap .user-avatar {
  padding: 0.2rem !important;

  .avatar {
    margin-right: 0.22667rem;
    width: 1rem;
    height: 1rem;
  }

  .info {
    flex: 1;

    .head-my {
      font-size: 16PX;
    }
  }

  .no-wrap {
    align-self: flex-start;
    padding-top: 10px;
  }
}

.people-list .people-item .user-avatar .color-tip {
  font-size: 16PX;
}

.people-list {
  .foot-more {
    .foot-center {
      display: flex;

      > p {
        font-size: 16PX;
        text-align: center;
        width: 100%;
        line-height: 1rem;
        color: #5383E7;
      }
    }
  }

  .people-item .name {
    line-height: inherit;
  }
}

.live-msg {
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  max-height: 4.5em;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-weight: bold;
}

.inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d0d0d0;
  padding: 0.3rem;

  .comment-my {
    font-size: 16PX;
    padding-bottom: .13333rem;
    color: #333;
  }

  .icons-btn-wrap-my {
    font-size: 16PX;
    padding: 0 .26667rem;
    padding-bottom: .13333rem;
    display: flex;
    align-content: center;

    .hasUp-my {
      color: #333;
    }

    .icon-like {
      display: inline-block;
      background: url('../../../../static/images/dangjian/home/news/icon-flower.png') no-repeat center;
      width: 0.6rem;
      height: 0.6rem;
      background-size: 100% 100%;
      margin-right: 0.13333rem;
    }

    .icon-licked {
      display: inline-block;
      background: url('../../../../static/images/dangjian/home/news/icon-flower-red.png') no-repeat center;
      width: 0.6rem;
      height: 0.6rem;
      background-size: 100% 100%;
      margin-right: 0.13333rem;
    }
  }
}

.study-my {
  /* background: #fff; */
  /*-webkit-box-shadow: 0px 0.06667rem 0.26667rem 0px rgba(0,0,59,0.1);*/
  /* box-shadow: 0px 0.06667rem 0.26667rem 0px rgba(0,0,59,0.1); */
  overflow: hidden;
  margin: 0 0 0.04rem 0;
  border-radius: 0px;
  border-bottom: 1px solid #d0d0d0;
  .user-avatar {
    padding: 0.2rem 0.3rem;
  }
  .recomment-my {
    border-top: 1px solid #d0d0d0;
    font-size: 16PX;
    padding: 0 0.3rem 0 0.8rem;
    .span-my{
      user-select:text;
      font-size: 16PX;
      word-wrap: break-word;
      word-break: normal;
      color: #333333;
      font-family: PingFang SC, miui, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-serif !important;
    }
    .title {
      margin: 0.2rem 0;
      .name-my{
        font-weight: bold;
      }
      .arrow_left {
        display: inline-block;
        background: url('../../../../static/images/icon-right.png') no-repeat center;
        width: 0.4rem;
        height: 0.3rem;
        background-size: 100% 100%;
        margin: 0 0.1rem;
      }
    }
  }

  .card-foot-my {
    padding: 0 0.4rem 0 0.3rem;

    .split-my {
      width: 100%;
      font-size: 12PX;
      color: #999;
      display: flex;
      align-items: center;
      padding-bottom: 0.2rem;
      .split-inner{
        width: 1rem;
        border-bottom: 2px solid #d0d0d0;
        height: 0px;
      }
      .middle{
        font-size: 12PX;
        padding: 1%;
      }
      .icon-triangle-down {
        display: inline-block;
        background: url('../../../../static/images/dangjian/home/icon-triangle-down.png') no-repeat center;
        width: 0.3rem;
        height: 0.3rem;
        background-size: 100% 100%;
        margin-right: 0.13333rem;
      }
      .icon-triangle-up {
        display: inline-block;
        background: url('../../../../static/images/dangjian/home/icon-triangle-up.png') no-repeat center;
        width: 0.3rem;
        height: 0.3rem;
        background-size: 100% 100%;
        margin-right: 0.13333rem;
      }
    }

    .span-my {
      /*font-weight: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-break: break-all;*/
      user-select:text;
      word-wrap: break-word;
      word-break: normal;
      font-size: 16PX;
      font-family: PingFang SC, miui, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-serif !important;
    }

    .text {
      .right-my {
        display: flex;
        width: 40%;

        .support {
          display: flex;
          align-items: center;

          .icon-like {
            display: inline-block;
            background: url('../../../../static/images/dangjian/home/news/icon-like.png') no-repeat center;
            /*background: url('../../../../static/images/dangjian/home/news/icon-flower.png') no-repeat center;*/
            width: 0.4rem;
            height: 0.4rem;
            background-size: 100% 100%;
          }

          .icon-licked {
            display: inline-block;
            background: url('../../../../static/images/dangjian/home/news/icon-like-active.png') no-repeat center;
            /*background: url('../../../../static/images/dangjian/home/news/icon-flower.png') no-repeat center;*/
            width: 0.4rem;
            height: 0.4rem;
            background-size: 100% 100%;
          }

          .icon-comment {
            display: inline-block;
            background: url('../../../../static/images/dangjian/home/icon-comment.png') no-repeat center;
            width: 0.4rem;
            height: 0.4rem;
            background-size: 100% 100%;

            &:hover {
              opacity: .8;
            }

            &.open {
              width: 200px;
              height: 80px;
              font-size: 16px;
              background-color: orange;
              color: #fff;
            }

            &.try {
              width: 100px;
              height: 40px;
              background-color: green;
              color: #fff;
              margin-top: 50px;
            }
          }
        }
      }
    }
  }
}

.text {
  font-size: 12PX;
  display: flex;
  justify-content: space-between;
  color: #999999;
  margin: 0.2rem 0;
  font-family: dang;
  .right-my {
    display: flex;
    justify-content: space-around;
    width: 40%;

    .support {
      display: flex;
      align-items: center;

      .icon-like {
        display: inline-block;
        background: url('../../../../static/images/dangjian/home/news/icon-like.png') no-repeat center;
        /*background: url('../../../../static/images/dangjian/home/news/icon-flower.png') no-repeat center;*/
        width: 0.4rem;
        height: 0.4rem;
        background-size: 100% 100%;
        margin-right: 0.13333rem;
      }

      .icon-licked {
        display: inline-block;
        background: url('../../../../static/images/dangjian/home/news/icon-like-active.png') no-repeat center;
        /*background: url('../../../../static/images/dangjian/home/news/icon-flower-red.png') no-repeat center;*/
        width: 0.4rem;
        height: 0.4rem;
        background-size: 100% 100%;
        margin-right: 0.13333rem;
      }

      .icon-comment {
        display: inline-block;
        background: url('../../../../static/images/dangjian/home/icon-comment.png') no-repeat center;
        width: 0.4rem;
        height: 0.4rem;
        background-size: 100% 100%;
        margin-right: 0.13333rem;

        &:hover {
          opacity: .8;
        }

        &.open {
          width: 200px;
          height: 80px;
          font-size: 16px;
          background-color: orange;
          color: #fff;
        }

        &.try {
          width: 100px;
          height: 40px;
          background-color: green;
          color: #fff;
          margin-top: 50px;
        }
      }
    }
  }
}

.foot-action {
  .inner {
    min-height: 1.2rem;
    //border-bottom: 1px solid #d0d0d0;
    .avatar {
      margin-right: 0.2rem;
      width: 1.2rem;
      height: 1.2rem;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      border: none;
      border-radius: 100%;
      overflow: hidden;
      position: relative;
      background: #ddd;

      > img {
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        /* width: 100%; */
        height: 100%;
      }
    }

    .input-wrap {
      border-radius: 10px;
      display: flex;
      max-width: calc(100vw);
      width: 100%;

      input {
        font-size: 16PX;

        &::placeholder {
          font-size: 16PX;
        }
      }

      input, textarea {
        font-family: dang;
        box-sizing: border-box;
        margin: 0;
        margin-right: 100px;
        display: block;
        width: 100%;
        border: none;
        border-radius: 10px;
        line-height: 1.2em;
        font-size: $defaultFontSize;
        padding-top: 9PX;
        height: 30PX;

        &::placeholder {
          font-size: $defaultFontSize;
        }
      }
    }

    .icons-btn-wrap {
      .hasUp-my {
        font-size: 16PX;
        margin-right: 17%;
        margin-left: 2%;
      }

      width: 100%;
      justify-content: flex-end;

      .icon .num {
        background: #868686;
      }
    }
  }
}

.title.link-arrow.link {
  border-color: #eeeeee;

  &.active {
    border-color: #0f9ceb;
  }
}

.text-btn {
  white-space: nowrap;
  position: absolute;
  width: 110px;
  right: 0;
  top: 0;
  height: 100%;
  border-radius: 10px;
  background: #ffffff;

  span {
    position: absolute;
    right: 0;
    top: 50%;
    white-space: nowrap;
    transform: translateY(-50%);
    text-align: center;
    /*padding:10px 30px;*/
    width: 100%;
    display: block;
    /*background:#fff;*/
  }
}

.input-wrap1 {
  min-height: 1.2rem;
}

</style>
